<template>
  <view class="page_min_height p-12 bg-white">
    <!-- 搜索栏 -->
    <view class="flex justify-between items-center">
      <view class="flex-1 flex items-center px-12 bg-gray-100 rounded-full">
        <uni-icons type="search" size="32rpx" />
        <view class="flex-1">
          <uni-easyinput
            v-model="searchValue"
            type="text"
            :inputBorder="false"
            placeholderStyle="color: #999;"
            :styles="{ backgroundColor: '#f6f3f4' }"
            placeholder="请输入关键字"
            @clear="onSearch"
            @confirm="onSearch"
          />
        </view>
      </view>
      <view class="px-12" @click="onSearch">搜索</view>
    </view>
    <view class="mt-20">
      <DataLoading v-if="loading" />
      <template v-else>
        <template v-if="regulationList.length">
          <view v-for="item in regulationList" :key="item.id" class="mb-12" @click="onDetail(item.id)">
            {{ item.title }}
          </view>
        </template>
        <EmptyData v-else />
      </template>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { getRegulationListApi } from '@/api/regulation';
import { usePage } from '@/utils/usePublic';
import { debounce } from '@/utils/utils';

const loading = ref(false);
const searchValue = ref('');
const regulationList = ref([]);
const pageParams = usePage();
pageParams.limit = 30;

onLoad(({ keyword }) => {
  searchValue.value = keyword;
  onSearch();
});

onReachBottom(() => {
  if (pageParams.isLoadAll) {
    return;
  }
  pageParams.page++;
  getRegulationList();
});

const onSearch = debounce(function () {
  pageParams.page = 1;
  regulationList.value = [];
  getRegulationList();
});

async function getRegulationList() {
  loading.value = true;
  const { data } = await getRegulationListApi({
    ...pageParams,
    title: searchValue.value,
  });
  loading.value = false;
  regulationList.value = regulationList.value.concat(data.list);
  pageParams.isLoadAll = data.list.length < pageParams.limit;
}

function onDetail(id) {
  uni.navigateTo({
    url: `/pages/regulation/detail?id=${id}`,
  });
}
</script>
